<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
    <%
    Date today = new Date();
    String editorId = (String) session.getAttribute("editorId");
    if(editorId==null){
        response.sendRedirect("/editorJfinalProject/user/welcome");
    }
%>
<head>
    <meta charset="utf-8">
    <title>上海跬步信息科技有限公司</title>
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/fancybox.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://www.kuibutech.com/editorJfinalProject/css/style1.css" type="text/css" media="screen"/>
    <script src="http://www.kuibutech.com/editorJfinalProject/js/jquery-1.7.1.js"></script>
    <style>
        body {
            font: 13px 'Lucida sans', Arial, Helvetica;
            color: #eee;
            text-align: center;
        }

        a {
            color: #ccc;
        }

        /*-------------------------------------*/

        .cf:before, .cf:after{
            content:"";
            display:table;
        }

        .cf:after{
            clear:both;
        }

        .cf{
            zoom:1;
        }

        /*-------------------------------------*/

        .form-wrapper {
            width: 450px;
            padding: 15px;
            margin: 50px auto 50px auto;
            background: #444;
            background: rgba(0,0,0,.2);
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            -moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
            -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
            box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
        }

        .form-wrapper input {
            width: 330px;
            height: 40px;
            padding: 10px 5px;
            float: left;
            font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
            border: 0;
            background: #eee;
            -moz-border-radius: 3px 0 0 3px;
            -webkit-border-radius: 3px 0 0 3px;
            border-radius: 3px 0 0 3px;
        }

        .form-wrapper input:focus {
            outline: 0;
            background: #fff;
            -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
            -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
            box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
        }

        .form-wrapper input::-webkit-input-placeholder {
            color: #999;
            font-weight: normal;
            font-style: italic;
        }

        .form-wrapper input:-moz-placeholder {
            color: #999;
            font-weight: normal;
            font-style: italic;
        }

        .form-wrapper input:-ms-input-placeholder {
            color: #999;
            font-weight: normal;
            font-style: italic;
        }

        .form-wrapper button {
            overflow: visible;
            position: relative;
            float: right;
            border: 0;
            padding: 0;
            cursor: pointer;
            height: 40px;
            width: 110px;
            font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
            color: #fff;
            text-transform: uppercase;
            background: #d83c3c;
            -moz-border-radius: 0 3px 3px 0;
            -webkit-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
            text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        }

        .form-wrapper button:hover{
            background: #e54040;
        }

        .form-wrapper button:active,
        .form-wrapper button:focus{
            background: #c42f2f;
        }

        .form-wrapper button:before {
            content: '';
            position: absolute;
            border-width: 8px 8px 8px 0;
            border-style: solid solid solid none;
            border-color: transparent #d83c3c transparent;
            top: 12px;
            left: -6px;
        }

        .form-wrapper button:hover:before{
            border-right-color: #e54040;
        }

        .form-wrapper button:focus:before{
            border-right-color: #c42f2f;
        }

        .form-wrapper button::-moz-focus-inner {
            border: 0;
            padding: 0;
        }

    </style>
    <script>
        $(document).ready(function(){
            $("#lookTui").on("click",getTuisong);

        });
        function getTuisong(){
            $.post("/editorJfinalProject/page/getTuisong",{keyWord:$("#keyWord").val()},function(data){
                if(data.message=="no"){
                    alert("对不起，没有该文章！")
                }else if(data.message=="much"){
                    alert("关键字信息不全，查询到多篇文章！")
                }else{
                    info = data.message;
                    $("#id").text("文章Id："+info.pageId);
                    $("#imgUrl").text("标题图片："+info.imageSrc);
                    $("#secondType").text("二级分类Id："+info.secondType);
                    $("#title").text("文章标题："+info.firstTitle);
                }
            }) ;
        }
    </script>
</head>
<body>

    <form action="/editorJfinalProject/page/gotoSearchPage" method="post" class="form-wrapper cf">
        <input type="text" name="keyWord" placeholder="请输入标题关键字..." required>
        <button type="submit">查看文章</button>
    </form>

    <form class="form-wrapper cf">
        <input id="keyWord" type="text" name="keyWord" placeholder="请输入标题关键字..." required>
        <button type="button" id="lookTui">查看推送</button>
    </form>

    <div style="margin: 50px auto;text-align: left;width:450px;color: black;font-size: 25px" >
        <span id="id"></span><br>
        <span id="imgUrl"></span><br>
        <span id="secondType"></span><br>
        <span id="title"></span><br>
    </div>

</body>
</html>